import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Select, Input, Checkbox, Switch, message,Spin } from 'antd';
import styles from './index.less';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;

class AddRoles extends Component {
  constructor(props) {
    super(props);
    this.state = {
      states: false,
      login:false
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
  }

  sysAddRole = () => {
    this.setState({login:true})
    const { dispatch, currentUser } = this.props;
    const { states } = this.state;
    let user = this.userInfo();
    const roleVo = { userStatus : !states?1:0, roleName: user.name, remakers: user.namems,userId  :currentUser.uid };
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'roleManagement/sysAddRole',
        payload: roleVo,
        callback: res => {
          console.log('新增角色', res);
          if(!res.code){
            message.success(`${res.msg}`)
            this.props.feel('false')
            this.setState({login:false})
          }
        },
      });
    });
  };

  onChangeSwitch = states => {
    console.log(states);
    this.setState({ states });
  };

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法
    // let user  = this.userInfo()
    // console.log(user)
  };

  operation = () => {
    //  let user  = this.userInfo()
    // console.log(user)
    this.sysAddRole();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 2,
        lg: 1,
      },
      wrapperCol: {
        sm: 24,
        md: 19,
        lg: 22,
      },
    };
    // 多选框参数
    return (
      <div>
        <Spin spinning={this.state.login}>
        <div className={styles.der}>
          <Form className="zdyfroma" layout="horizontal">
            <FormItem label="角色名称" className={styles.wardfrom}>
              {getFieldDecorator('name', {
                initialValue: '',
              })(<Input placeholder="请输入角色名称" />)}
            </FormItem>
            <FormItem className="zdyswer" label="状态" {...FormItemLayont}>
              {getFieldDecorator('states', {
                initialValue: '',
              })(
                <div>
                  <Switch
                    defaultChecked
                    onChange={this.onChangeSwitch}
                    checked={this.state.states}
                  />
                  <span
                    style={{
                      marginLeft: 20,
                      color: '#1D1D1D',
                    }}
                  >
                    {this.state.states ? '未启用' : '启用'}
                  </span>
                </div>
              )}
            </FormItem>
            <FormItem label="描述" className={styles.wardfrom}>
              {getFieldDecorator('namems', {
                initialValue: '',
              })(<Input placeholder="请输入描述内容" />)}
            </FormItem>
          </Form>
          <div className={styles.flex}>
            <div>
              {/* <img  src={qxbuttom} style={{ marginRight: 50 }} /> */}
              <img onClick={this.operation} src={qdbuttom} />
            </div>
          </div>
        </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(AddRoles));
